<template>
  <div class="my">
    <div class="aaa">
      <search></search>
    </div>

    <swiper></swiper>
    <button>AAAAA</button>
    <van-grid :column-num="4">
      <van-grid-item v-for="(item,index) in functions" :key="index" icon="photo-o">
        <div class="text" slot="text">{{ item.text }}</div>
      </van-grid-item>
    </van-grid>

    <div class="allItem flex flex-wrap">
      <div v-for="(item,index) in functions" :key="index" class="item1 textAlignCenter">
        <img :src=item.img alt="">
        <p>{{ item.text }}</p>
      </div>
    </div>
    <div class="card flex flex-evenly flex-wrap shadow">
      <div class="cardItem textAlignCenter"
           v-for="(item,index) in card" :key="index">
        <p class="num">{{ item.cardNum }}</p>
        <p class="text">{{ item.cardText }}</p>
      </div>
    </div>
    <div class="mb"></div>
    <vant-tabbar></vant-tabbar>
  </div>
</template>

<script>

import Vue from 'vue';
import {Grid, GridItem} from 'vant';

Vue.use(Grid);
Vue.use(GridItem);

import Swiper from "../components/swiper/swiper";
import Search from "./home/search";
import VantTabbar from "../components/vantTabbar/vantTabbar";

export default {
  name: "my",
  components: {
    VantTabbar,
    Search,
    Swiper,
  },
  data() {
    return {
      columns: ['长沙', '宁波', '温州', '绍兴', '湖州', '嘉兴', '金华', '衢州'],
      card: [{cardText: "话费余额（元）", cardNum: 266.12}, {cardText: "赠送流量(MB)", cardNum: 150}, {
        cardText: "和包券(元)",
        cardNum: 10.12
      },
        {cardText: "优惠业务(个)", cardNum: 4}, {cardText: "积分", cardNum: 600}, {cardText: "积分倍享(倍)", cardNum: 2},],
      functions: [{
        img: require("@/assets/img/my/icon1.png"),
        text: "我的权益券"
      }, {img: require("@/assets/img/my/icon2.png"), text: "已兑权益"},
        {img: require("@/assets/img/my/icon3.png"), text: "我的优惠券"}, {
          img: require("@/assets/img/my/icon4.png"),
          text: "和多惠PLUS会员"
        },
        {img: require("@/assets/img/my/icon5.png"), text: "我家的云盘"}, {
          img: require("@/assets/img/my/icon6.png"),
          text: "我家的云音乐"
        },
        {img: require("@/assets/img/my/icon7.png"), text: "我家的云书房"}, {
          img: require("@/assets/img/my/icon8.png"),
          text: "我家的云游戏"
        },
        {img: require("@/assets/img/my/icon9.png"), text: "我的生活"}, {
          img: require("@/assets/img/my/icon10.png"),
          text: "我的业务"
        },
        {img: require("@/assets/img/my/icon11.png"), text: "139邮箱"},],
    };
  },
  methods: {},
}
</script>

<style scoped>
.mb {
  margin-bottom: 2rem;
}

.aaa {
  width: 100%;
  position: absolute;
  z-index: 10;
}

.text {
  font-size: .3rem;
}

.allItem { /*width: 100%;*/
}

.item1 {
  width: 25%;
  padding: .3rem 0;
  flex-shrink: 0;
}

.item1 img {
  width: .8rem;
  height: .8rem;
  margin-bottom: .1rem;
}

.item1 p {
  font-size: .2rem;
}

.card {
  margin: 0 .5rem;
  border-radius: .2rem
}

.cardItem {
  width: 30%;
  padding: .4rem 0;
  flex-shrink: 0;
}

.cardItem .num {
  font-size: .6rem;
}

.cardItem .text {
  font-size: .3rem;
  color: #9D9D9D;
}
</style>